<template>
  <el-card style="margin:1em 0;" :shadow="isShort?'hover':'never'">
    <template #header>
      <el-row style="flex" justify="start">
        <el-col :span="16" style="text-align: left; font-size: 2em">
          {{
            article.title
          }}
        </el-col>
        <el-col :span="8" style="text-align: right; font-size: 0.5em">
          <div>创建时间：{{ $filters.timeFormatter(article.created_at) }}</div>
          <div>修改时间：{{ $filters.timeFormatter(article.last_modified_at) }}</div>
        </el-col>
      </el-row>
    </template>
    <div>
      <el-row style="flex" justify="left" :gutter="10">
        <el-col :span="4" style="text-align: left">
          <i class="fa fa-tags" style="color: aqua"></i> 标签：
        </el-col>
        <el-col :span="20" style="text-align: left">
          <el-tag v-for="tag in article.tags" :key="tag.name" class="my-tag">{{ tag.name }}</el-tag>
        </el-col>
      </el-row>
    </div>
    <div v-if="isShort" style="text-align: left; margin-top: 1em">{{ $filters.ellipsis(article.content, 20) }}
      <span style="font-size:.8em;"> <router-link :to="{name:'articleDetail', params:{id:article.id}}">查看详细 <i class="fa fa-chevron-down"></i></router-link></span>
      </div>
      <div v-else>
        <!-- {{article.content}} -->
        <v-md-preview :text="article.content"></v-md-preview>
      </div>
  </el-card>
</template>

<script>
export default {
  props: {
    article: { type: Object, default: null },
    isShort:{type:Boolean, default:true}
  }
};
</script>

<style>
</style>